<template>
	<view class="nick-name">
		<view class="line"></view>
		<view class="main">
			<view class="con">
				<textarea class="ipt" maxlength="60" v-model="content" placeholder="请输入内容" />
				<view class="total">
					{{content.length}}/60
				</view>
			</view>
			<view class="tips">注：内容的长度为5到60位</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {onNavigationBarButtonTap} from "@dcloudio/uni-app"
const content=ref('')
onNavigationBarButtonTap((e)=>{
	console.log(e)
})
</script>

<style scoped lang="scss">
.nick-name{
	.line{
	   height: 1px;
	   background-color: #252731;
	}
	.con{
		display: flex;
		padding:30rpx 20rpx;
	}
	.ipt{
		background-color: #4A4C52;
		height: 500rpx;
		flex:1;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		padding-left: 10rpx;
	}
	.total{
		background-color: #4A4C52;
		width: 100rpx;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		font-size: 28rpx;
		color: #ddd;
		padding-top: 40rpx;
	}
	.tips{
		padding:0 20rpx;
		color: #ddd;
	}
}
</style>
